<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="card-box">
      <el-button type="primary"
        @click="handleAddCateDialogOpen"
      >添加分类</el-button>
      <el-table :data="cateList" border
      row-key="cat_id"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="分类名称" prop="cat_name" min-width="180"></el-table-column>
        <el-table-column label="是否有效" min-width="120">
          <i class="el-icon-success" style="color: lightgreen;"></i>
        </el-table-column>
        <el-table-column label="等级"  min-width="120">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.cat_level == 0">一级</el-tag>
            <el-tag size="small" type="success" v-else-if="scope.row.cat_level == 1">二级</el-tag>
            <el-tag size="small" type="warning" v-else-if="scope.row.cat_level == 2">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template v-slot="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit"
              @click="handleEditCateDialogOpen(scope.row)"
            >修改</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete"
              @click="handleCategoryDelete(scope.row.cat_id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
      layout="total,sizes,prev,pager,next,jumper"
      :total="total"
      :page-sizes="[5,10,15,20]"
      :page-size="pagesize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      ></el-pagination>
    </el-card>
    <!-- 添加分类弹框 -->
    <el-dialog title="添加商品分类" :visible.sync="addCateDialogVisable" @closed="handleAddDialClose">
      <el-form :model="addCateForm" :rules="cateRules" label-width="100px" ref="addCateFormRef">
        <el-form-item prop="cat_name" label="分类名称" required>
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" >
          <el-cascader clearable
            v-model="selectCateKeys"
            :options="parentCates"
            :props="cateCascaderProps"
             @change="handleParentCateChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="addCateDialogVisable = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddCate">确 定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑分类弹框 -->
    <el-dialog title="编辑商品分类" :visible.sync="editCateDialogVisable" @closed="handleEditDialClose">
      <el-form :model="editCateForm" :rules="cateRules" label-width="100px" ref="editCateFormRef">
        <el-form-item prop="cat_name" label="分类名称" required>
          <el-input v-model="editCateForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button @click="editCateDialogVisable = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdateCate">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCategories,
  addCategory,
  updateCategory,
  deleteCategoryById
} from '../../../api/cates'
export default {
  created(){
    this.getCategoryList()
  },
  data(){
    return{
      pagenum:1,
      pagesize:5,
      total:0,
      cateList:[],
      parentCates:[],
      addCateDialogVisable:false,
      editCateDialogVisable:false,
      // 添加分类表单
      addCateForm:{
        cat_pid:0,
        cat_name:'',
        cat_level:0
      },
      editCateForm:{
        cat_id:0,
        cat_name:'',
      },
      cateRules:{
        cat_name:[{ required: true, message: '请输入分类名称', trigger: 'blur' }]
      },
      // （分类级联）选择的分类
      selectCateKeys:[],
      // 分类级联的配置
      cateCascaderProps:{
        expandTrigger: 'hover',
        value:'cat_id',
        label:'cat_name',
        children:'children',
        checkStrictly: true //可以选择任意一级
      }
    }
  },
  methods:{
    // 获取分类列表
    async getCategoryList(){
      try {
        const res = await getCategories({
          pagenum:this.pagenum,
          pagesize:this.pagesize,
        })
        this.cateList = res.data.result
        this.total = res.data.total
      } catch (err) {
        console.log(err);
      }
    },
    // 分页大小改变
    handleSizeChange(pagesize){
      this.pagenum = 0
      this.pagesize = pagesize
      this.getCategoryList()
    },
    // 跳转分页
    handleCurrentChange(pagenum){
      this.pagenum = pagenum
      this.getCategoryList()
    },
    // 获取父分类
    async getParentCategories(){
      try {
        const res = await getCategories({
          type:2
        })
        this.parentCates = res.data
      } catch (err) {
        console.log(err);
      }
    },
    // 处理添加分类框关闭
    handleAddDialClose(){
      this.$refs.addCateFormRef.resetFields()
      this.selectCateKeys = []
    },
    // 处理修改分类框关闭
    handleEditDialClose(){
      this.$refs.editCateFormRef.resetFields()
    },
    // 打开添加分类弹框
    handleAddCateDialogOpen(){
      this.addCateDialogVisable = true
      this.getParentCategories()
    },
    handleEditCateDialogOpen(cate){
      const {cat_id,cat_name} = cate
      this.editCateForm = {cat_id,cat_name}
      this.editCateDialogVisable = true
    },
    // 完成选择所属分类
    handleParentCateChange(selectCateKeys){
      this.addCateForm.cat_level = selectCateKeys.length
      this.addCateForm.cat_pid = selectCateKeys[selectCateKeys.length-1]
    },
   
    // 添加分类
    confirmAddCate(){
      this.$refs.addCateFormRef.validate(async (v,a)=>{
        if(!v){
          console.log(v);
          console.log(a);
          this.$message({
            type:'error',
            message:'请正确填写信息'
          })
          return
        }
        try {
          const res = await addCategory(this.addCateForm)
          this.addCateDialogVisable = false
          this.$message({
            type:'success',
            message:res.meta.msg
          })
          this.getCategoryList()
        } catch (err) {
          console.log(err);
        }
      })
      
    },

    // 修改分类
    async confirmUpdateCate(){
      const {cat_id,cat_name} = this.editCateForm
      try {
        const res = await updateCategory(cat_id,{
          cat_name
        })
        this.editCateDialogVisable = false
        this.$message({
          type:'success',
          message: res.meta.msg
        })
        this.getCategoryList()
      } catch (err) {
        console.log(err);
      }
    },

    // 
    handleCategoryDelete(id){
      this.$confirm('此操作将永久删除该分类信息, 是否继续?','删除分类',{
        type:'warning'
      })
      .then(async ()=>{
        try {
          const res = await deleteCategoryById(id)
          console.log(res);
          this.$message({
            type:'success',
            message:res.meta.msg
          })
          this.getCategoryList()
        } catch (err) {
          console.log(err);
        }
      }).catch(()=>{
        this.$message('取消删除分类')
      })
    }
    
  }
}
</script>
<style scoped>
.el-cascader{
  width: 100%;
}


</style>